<template>
  <div>
    <button @click="toggleTheme" style="position: absolute; right: 24px; top: 24px; z-index: 10;">切换主题</button>
    <Layout>
      <template #header>
        <Header>网站LOGO | 顶部导航</Header>
      </template>
      <template #sider>
        <Sider>
          <ul>
            <li>菜单一</li>
            <li>菜单二</li>
            <li>菜单三</li>
          </ul>
        </Sider>
      </template>
      <template #content>
        <Content>
          <h2>主内容区</h2>
          <p>这里是页面的主要内容。</p>
        </Content>
      </template>
      <template #footer>
        <Footer>© 2025 wang-ui</Footer>
      </template>
    </Layout>
  </div>
</template>

<script setup>
import Layout from '../../packages/Layout/Layout.vue'
import Header from '../../packages/Layout/Header.vue'
import Sider from '../../packages/Layout/Sider.vue'
import Content from '../../packages/Layout/Content.vue'
import Footer from '../../packages/Layout/Footer.vue'

function toggleTheme() {
  document.documentElement.classList.toggle('dark')
}
</script>
